<template>
	<view class="testdrive" v-if="isShowDrivePage">
		<image v-if="test_drive_img" class="testdrive_bk_img" :src="picUrl+test_drive_img" mode="widthFix"></image>
		<view class="testdrive_form">
			<view class="groupmanage_input_box">
				<input class="flex-1" v-model="name" placeholder="姓名" placeholder-style="color: #000000;" />
			</view>
			<view class="groupmanage_input_box">
				<input class="flex-1" type="tel" v-model="mobile" placeholder="电话"
					placeholder-style="color: #000000;" />
			</view>
			<block v-if="channel=='zh'">
				<view class="mt-20 f-12">
					<uni-data-select class="step_select" v-model="project_id" :localdata="project_arr"
						@change="changeProjects" placeholder="粉丝嘉年华现场试乘预约" :clear="false"></uni-data-select>
				</view>
				<view class="mt-20 f-12">
					<uni-data-select class="step_select" v-model="drive_car_series"
						:localdata="test_drive_car_series_arr" @change="changeP" placeholder="试驾意向车型"
						:clear="false"></uni-data-select>
				</view>
				<view class="mt-20 f-12">
					<uni-data-select class="step_select" v-model="buy_car_series" :localdata="test_drive_car_series_arr"
						@change="changeP" placeholder="购买意向车型" :clear="false"></uni-data-select>
				</view>
			</block>
			<view class="mt-20 f-12">
				<uni-data-select class="step_select" v-model="DealerProvinceId" :localdata="plist" @change="changeP"
					placeholder="请选择省份" :clear="false"></uni-data-select>
			</view>
			<view class="mt-20 f-12">
				<uni-data-select class="step_select" v-model="DealerCityId" :localdata="clist" @change="changeC"
					placeholder="请选择城市" :clear="false"></uni-data-select>
			</view>
			<view class="mt-20 f-12">
				<uni-data-select class="step_select" v-model="DealerId" :localdata="jlist" @change="changeJ"
					placeholder="请选择经销商" :clear="false"></uni-data-select>
			</view>
			<block v-if="channel==0">
				<view class="mt-20 f-12">
					<uni-data-select class="step_select" v-model="drive_car_series"
						:localdata="test_drive_car_series_arr" placeholder="试驾意向车型" :clear="false"></uni-data-select>
				</view>
				<view class="mt-20 f-12">
					<uni-data-select class="step_select" v-model="buy_car_series" :localdata="test_drive_car_series_arr"
						placeholder="购买意向车型" :clear="false"></uni-data-select>
				</view>
			</block>
			<view class="group_public_btn_block mt-40" @click="submitForm()">提交信息</view>
		</view>
		<view v-if="isFansPop" class="guide_mask_box"></view>
		<view class="fansmeeting_pop_box" v-if="isFansPop">
			<image class="pop_top_img" @load="loadPopTopImg" :src="picUrl+popImg" mode="widthFix"></image>
			<view class="fansmeeting_pop_content_box" v-if="showPopContent">
				<view class="f-15 text-c" v-if="popTitle">{{popTitle}}</view>
				<view class="fansmeeting_pop_content">
					<rich-text :nodes="popContent"></rich-text>
				</view>
				<view class="pd-20">
					<view v-if="showSubmitBtn==1&&popType==1" class="fansmeeting_pop_btn" @click="closeTipsPopup">
						{{popBtn}}
					</view>
					<view v-if="showSubmitBtn==1&&popType==2" class="fansmeeting_pop_btn" @click="closeXieYiPopup">
						{{popBtn}}
					</view>
					<view v-if="showSubmitBtn==2" class="fansmeeting_pop_btn_def">{{popBtn}}({{popTime}}s)</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getCh2CityList,
		getCh2CompanyList,
		submitTestDrive,
		getClubConfig,
		getDriverUserInfo
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				popType: 1,
				info: '',
				channel: 0,
				name: '',
				mobile: '',
				plist: [],
				DealerProvinceId: '',
				clist: [],
				DealerCityId: '',
				jlist: [],
				DealerId: '',
				isSubmit: true,
				test_drive_img: '',
				drive_car_series: '',
				buy_car_series: '',
				popBtn: '',
				popTime: 5,
				popContent: '',
				isFansPop: false,
				showSubmitBtn: 2,
				showPopContent: false,
				popImg: '',
				popTitle: '',
				isShowDrivePage: false,
				project_arr: [],
				project_name: '',
				project_id: '',
				drive_id: '',
				test_drive_car_series_arr: [],
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				this.getDriverUserInfo()
				this.getClubConfig()
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad(options) {

			this.type = options.type ? options.type : 0
			this.channel = options.channel ? options.channel : 0
			if (uni.getStorageSync('clubconfig')) {
				this.test_drive_img = uni.getStorageSync('clubconfig').test_drive_img
				if (this.channel != 'zh') {
					this.test_drive_car_series_arr = uni.getStorageSync('clubconfig').test_drive_car_series_arr
				}
			} else {
				this.getClubConfig()
			}
			this.getDriverUserInfo()
			this.getCh2CityList()
			var params = {
				event_code: '预约试驾',
				path: 'pages/testdrive/testdrive',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getDriverUserInfo() {
				var that = this
				getDriverUserInfo({
					channel: that.channel
				}).then(res => {
					if (res.state == 1) {
						that.info = res.data.info
						that.drive_id = res.data.info.id
						if (res.data.info.drive_status == 0) {
							var pop_info = res.data.info.pop_info
							if (that.channel == 'zh') {
								if (pop_info) {
									that.popType = 1
									that.showSubmitBtn = 1
									that.isFansPop = true
									that.popTitle = pop_info.popup_title
									that.popContent = pop_info.popup_content
									that.popBtn = pop_info.festival_popup_button_name
									that.popImg = pop_info.festival_popup_img
									that.isShowDrivePage = true
								}
								var list = res.data.info.project_arr
								list.forEach(obj => {
									// 检查对象是否包含要修改的键  
									if ('id' in obj) {
										// 创建一个新键并设置其值为旧键的值  
										obj['text'] = obj['name'];
										obj['value'] = obj['id'];
									}
								});
								that.project_arr = list
							} else {
								that.isShowDrivePage = true
							}
						} else {
							uni.redirectTo({
								url: '/pages/testdrive/testdriveresult?drive_id=' + res.data.info.id +
									'&channel=' + that.channel
							})
						}
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getClubConfig() {
				getClubConfig({}).then(res => {
					if (res.state == 1) {
						uni.setStorage({
							key: 'clubconfig',
							data: res.data,
							success: function() {}
						});
						this.test_drive_img = res.data.test_drive_img
						if (this.channel != 'zh') {
							this.test_drive_car_series_arr = res.data.test_drive_car_series_arr
						}
					} else {}
				})
			},
			getCh2CityList() {
				getCh2CityList({}).then(res => {
					if (res.state == 1) {
						this.plist = res.data.list
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getCh2CompanyList() {
				var that = this
				getCh2CompanyList({
					DealerProvinceId: that.DealerProvinceId,
					DealerCityId: that.DealerCityId,
				}).then(res => {
					if (res.state == 1) {
						var list = res.data.list
						list.forEach(obj => {
							// 检查对象是否包含要修改的键  
							if ('DealerId' in obj) {
								// 创建一个新键并设置其值为旧键的值  
								obj['text'] = obj['name'];
								obj['value'] = obj['DealerId'];
								// 可选：删除旧键  
								delete obj['address'];
								delete obj['manage'];
								delete obj['sales_tel'];
							}
						});
						that.jlist = list
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeProjects(e) {
				var that = this
				that.project_id = e
				that.drive_car_series = ''
				that.buy_car_series = ''
				that.info.project_arr.forEach(function(item, index) {
					if (item.id == e) {
						that.project_name = item.name
						that.test_drive_car_series_arr = item.car_series_arr
					}
				});
				var params = {
					event_code: '预约试驾',
					path: 'pages/testdrive/testdrive',
					event_id: '',
					title: '',
					source_page: '预约试驾-选择项目',
					value: '',
				}
				app.BurialPoint(params)
			},
			changeP(e) {
				var that = this
				that.DealerProvinceId = e
				that.DealerCityId = ''
				that.jlist = []
				that.DealerId = ''
				that.plist.forEach(function(item, index) {
					if (item.value == e) {
						that.clist = item.children
					}
				});
				var params = {
					event_code: '预约试驾',
					path: 'pages/testdrive/testdrive',
					event_id: '',
					title: '',
					source_page: '预约试驾-选择省份',
					value: '',
				}
				app.BurialPoint(params)
			},
			changeC(e) {
				this.DealerCityId = e
				this.DealerId = ''
				this.jlist = []
				this.getCh2CompanyList()
				var params = {
					event_code: '预约试驾',
					path: 'pages/testdrive/testdrive',
					event_id: '',
					title: '',
					source_page: '预约试驾-选择城市',
					value: '',
				}
				app.BurialPoint(params)
			},
			changeJ(e) {
				this.DealerId = e
				var params = {
					event_code: '预约试驾',
					path: 'pages/testdrive/testdrive',
					event_id: '',
					title: '',
					source_page: '预约试驾-选择经销商',
					value: '',
				}
				app.BurialPoint(params)
			},
			submitForm() {
				var that = this
				if (that.isSubmit) {
					that.isSubmit = false
					if (that.name == '') {
						uni.showToast({
							title: '请输入姓名',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						that.isSubmit = true
						return false;
					}

					if (that.mobile == '') {
						uni.showToast({
							title: '请输入电话',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						that.isSubmit = true
						return false;
					} else {
						if (!(/^1[3456789]\d{9}$/.test(that.mobile))) {
							uni.showToast({
								title: '请输入正确的电话',
								icon: 'none',
								duration: 1500
							});
							that.isSubmit = true
							return false;
						}
					}
					if (that.channel == 'zh') {
						if (that.project_name == '') {
							uni.showToast({
								title: '请选择粉丝嘉年华现场试乘预约',
								icon: 'none',
								duration: 1500
							});
							that.isSubmit = true
							return false;
						}
						if (that.drive_car_series == '') {
							uni.showToast({
								title: '请选择试驾意向车型',
								mask: true,
								icon: 'none',
								duration: 1500
							})
							that.isSubmit = true
							return false;
						}
						if (that.buy_car_series == '') {
							uni.showToast({
								title: '请选择购买意向车型',
								mask: true,
								icon: 'none',
								duration: 1500
							})
							that.isSubmit = true
							return false;
						}
					}
					if (that.DealerProvinceId == '') {
						uni.showToast({
							title: '请选择省份',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						that.isSubmit = true
						return false;
					}
					if (that.DealerCityId == '') {
						uni.showToast({
							title: '请选择城市',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						that.isSubmit = true
						return false;
					}
					if (that.DealerId == '') {
						uni.showToast({
							title: '请选择经销商',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						that.isSubmit = true
						return false;
					}
					if (that.channel == 0) {
						if (that.drive_car_series == '') {
							uni.showToast({
								title: '请选择试驾意向车型',
								mask: true,
								icon: 'none',
								duration: 1500
							})
							that.isSubmit = true
							return false;
						}
						if (that.buy_car_series == '') {
							uni.showToast({
								title: '请选择购买意向车型',
								mask: true,
								icon: 'none',
								duration: 1500
							})
							that.isSubmit = true
							return false;
						}
					}

					uni.showModal({
						content: '确定提交试驾信息吗',
						confirmColor: '#00A0DC',
						success: function(res) {
							if (res.confirm) {
								uni.showLoading()
								submitTestDrive({
									name: that.name,
									mobile: that.mobile,
									DealerProvinceId: that.DealerProvinceId,
									DealerCityId: that.DealerCityId,
									DealerId: that.DealerId,
									drive_car_series: that.drive_car_series,
									buy_car_series: that.buy_car_series,
									channel: that.channel,
									project_name: that.project_name
								}).then(res => {
									if (res.state == 1) {
										uni.hideLoading()
										uni.showToast({
											title: '提交成功',
											mask: true,
											icon: 'success',
											duration: 1500
										})
										setTimeout(function() {
											if (res.data.id > 0) {
												uni.redirectTo({
													url: '/pages/testdrive/testdriveresult?drive_id=' +
														res.data.id +
														'&channel=' + that.channel
												})
											} else {
												uni.navigateBack({
													delta: 1
												})
											}
										}, 500)
										that.isSubmit = true
										setTimeout(function() {
											that.name = ''
											that.mobile = ''
											that.DealerProvinceId = ''
											that.DealerCityId = ''
											that.DealerId = ''
										}, 1500)
									} else {
										uni.hideLoading()
										that.isSubmit = true
										uni.showToast({
											title: res.error[0],
											mask: true,
											icon: 'none',
											duration: 1500
										})
									}
								})
								var params = {
									event_code: '预约试驾',
									path: 'pages/testdrive/testdrive',
									event_id: '',
									title: '',
									source_page: '预约试驾-提交信息',
									value: '',
								}
								app.BurialPoint(params)
							} else if (res.cancel) {
								console.log('用户点击取消');
								that.isSubmit = true
							}
						}
					});
				}
			},
			loadPopTopImg() {
				this.showPopContent = true
			},
			closeTipsPopup() {
				var that = this
				var pop_info = that.info.pop_info
				that.popType = 2
				that.showSubmitBtn = 2
				that.popTitle = pop_info.popup_protocol_title
				that.popContent = pop_info.popup_protocol
				that.popBtn = pop_info.popup_protocol_button_name
				that.popTime = pop_info.popup_protocol_time
				that.popImg = pop_info.festival_popup_img
				if (that.popTime > 0) {
					var Interval = setInterval(function() {
						if (that.popTime > 1) {
							that.popTime = that.popTime - 1
						} else {
							that.showSubmitBtn = 1
							clearInterval(Interval)
						}
					}, 1000)
				} else {
					that.showSubmitBtn = 1
				}
			},
			closeXieYiPopup() {
				this.popTime = 5
				this.isFansPop = false
				this.showSubmitBtn = 2
				this.popTitle = ''
				this.popContent = ''
				this.popBtn = ''
				this.popTime = ''
				var params = {
					event_code: '预约试驾',
					path: 'pages/testdrive/testdrive',
					event_id: '',
					title: '',
					source_page: '预约试驾-确认签署免责声明书',
					value: '',
				}
				app.BurialPoint(params)
			},
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {

			}
		}
	}
</script>

<style lang="scss">
	.testdrive {

		.testdrive_bk_img {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: -1;
		}

		.testdrive_form {
			padding: 0 30rpx;
			margin-top: 58%;
			padding-bottom: 50rpx;

			.groupmanage_input_box {
				display: flex;
				align-items: center;
				height: 86rpx;
				font-size: 26rpx;
				margin-top: 40rpx;
				padding: 0 30rpx;
				border-radius: 8rpx;
				background-color: #ffffff;
				border: 1rpx solid #E9E9E9;

				.uni-select {
					border: 0px solid #E9E9E9 !important;
					box-sizing: border-box;
					border-radius: 4px;
					padding: 0 0 !important;
					border-bottom: solid 0px #E9E9E9 !important;
					width: 100%;
					flex: 1;
					height: 0 !important;
				}
			}

			.step_select {
				.uni-select {
					padding-left: 30rpx !important;
					height: 86rpx !important;
					background-color: #ffffff;
					border: 2rpx solid #E9E9E9;
				}

				.uni-select__input-placeholder {
					color: #000000 !important;
					font-size: 26rpx !important;
				}
			}
		}

		// .testdrive_form::before {
		// 	content: "";
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	right: 0;
		// 	height: 500rpx;
		// 	z-index: -1;
		// 	background: linear-gradient(to bottom, rgba(0, 160, 220, 0.15), #ffffff);
		// }
	}
</style>